<!--  -->
<template>
  <div class="header">
    <i
      :class="[isFold ? 'el-icon-s-fold navIcon' : 'el-icon-s-unfold navIcon']"
      @click="handleFoldClick"
    ></i>
    <div class="content">
      <div>
        <nav-breadcrumb />
      </div>
      <div
        style="
          position: absolute;
          right: 154px;
          top: 50%;
          transform: translateY(-50%);
          line-height: 15px;
          width: 120px;
          display: flex;
          justify-content: space-around;
        "
      >
        <a href="https://github.com/Xi-Yuer" target="blanck">
          <el-avatar
            :size="25"
            :src="require('../../../../src/assets/image/GitHub.png')"
          ></el-avatar
        ></a>
        <a href="https://gitee.com/Xi-Yuer">
          <el-avatar
            :size="25"
            :src="require('../../../../src/assets/image/gitee2.png')"
          ></el-avatar>
        </a>
        <el-badge is-dot>
          <el-avatar :size="25" icon="el-icon-bell"></el-avatar>
        </el-badge>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar
            :size="35"
            src="http://p3.music.126.net/DVxqAmJ4OXNaJS1EsWMOwg==/109951164878992396.jpg?param=30y30"
          >
          </el-avatar>
          <span>{{ name }}</span></span
        >
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-user-solid" @click="toUserInfo"
              >用户信息</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-s-tools">系统管理</el-dropdown-item>
            <el-dropdown-item icon="el-icon-error" @click="signOut"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import localCache from '../../../ultills/cache'
import NavBreadcrumb from '../../../base-ui/breadcrumb/src/nav-breadcrumb.vue'
export default defineComponent({
  components: {
    NavBreadcrumb
  },
  emits: ['foldChange'],
  setup(props, { emit }) {
    const store = useStore()
    const name = computed(() => store.state.login.userInfo.name)
    const isFold = ref(true)
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      emit('foldChange', isFold)
    }
    const router = useRouter()
    const toUserInfo = () => {
      router.push('/userinfo')
      store.commit('prantClick', '用户信息')
      store.commit('childClick', '')
    }
    const signOut = () => {
      router.replace('/login')
      localCache.clearCache()
    }
    return { handleFoldClick, isFold, name, toUserInfo, signOut }
  }
})
</script>
<style lang="less" scoped>
.header {
  position: relative;
  width: 100%;
  display: flex;
  .navIcon {
    cursor: pointer;
    font-size: 30px;
  }
  .content {
    flex: 1;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-dropdown-link {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
